<template>
  <el-dialog width="700px" title="自定义搜索条件" v-model="dialogFormVisible" :draggable="true" @close="dialogClose">
    <div class="dialog-content">
      <el-alert title="你可在此配置哪些搜索条件为常用搜索，哪些为高级搜索" type="warning" show-icon :closable="false" />
      <el-transfer v-model="chooseList" :data="dataList" :props="transferProps" :titles="['高级搜索','常用搜索']" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitHandle">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, toRefs } from 'vue'
import searchItem from './searchItem'
export default {
  setup(props, context) {
    const state = reactive({
      dialogFormVisible: false,
      chooseList: [],
      dataList: [],
      transferProps: {
        label: 'name',
        key: 'id',
        disabled: 'isDisabled'
      },
    })

    function dialogShow() {
      setListData()
      state.dialogFormVisible = true
    }

    function setListData() {
      const uuList = JSON.parse(window.localStorage.getItem('SEARCHITEM_INRE'))
      const cList = []
      uuList.map(item => {
        cList.push(item.id)
      })
      state.chooseList = cList
      state.dataList = JSON.parse(JSON.stringify([...searchItem]))
    }

    function submitHandle() {
      const myList = []
      state.dataList.map(item => {
        item.isCommonlysed = false
        state.chooseList.map(items => {
          if (item.id == items) {
            item.isCommonlysed = true
            myList.push(item)
          }
        })
      })
      window.localStorage.setItem('SEARCHITEM_INRE', JSON.stringify(myList))
      context.emit('dialogClose')
      state.dialogFormVisible = false
    }

    function dialogClose() {
      state.chooseList = []
      state.dataList = []
    }

    return {
      ...toRefs(state),
      dialogShow,
      dialogClose,
      submitHandle,
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-content {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 20px;
}
</style>